<template>
	<div id="temp">
		<!-- 分类 -->
		<div id="category">
			<!-- 动态设置ul的宽度 -->
			<ul v-bind="{style: 'width:' + ulWidth + 'px'}">
				<li @click="getImgs(0)">全部</li>
				<li v-for="item in list" @click="getImgs(item.id)">{{item.title}}</li>
			</ul>
		</div>
		
		<!-- 图片列表 -->
		<div id="imgList">
			<!-- v-lazy实现懒加载 (不浏览就不加载) -->
			<ul>
			  <li v-for="item in imgs">
			    <router-link v-bind="{to: '/photo/photoInfo/' + item.id}">
			    	<img v-lazy="item.img_url">
				    <div class="desc">
				    	<h5 v-text="item.title"></h5>
				    	<p v-text="item.zhaiyao"></p>
				    </div>
			    </router-link>
			  </li>
			</ul>
		</div>
		
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	export default {
		data() {
			return {
				ulWidth: 375,//双向绑定 用于设置ul的宽度
				list: [], //存放图片分类数据
				imgs: [],  //存放图文列表的数据
			}
		},
		methods: {
			//获取图文列表数据
			getImgs(id) {
				id = id || 0;
				var url = this.$common.apidomain + '/api/getimages/' + id;
				this.$http.get(url).then(function (res) {
					//console.log(res.body.message);
					if (res.body.status != 0) {
						Toast(res.body.message);
						return;
					}
					this.imgs = res.body.message;
				})
			},
			//获取图片分类数据
			getCategory() {
				var url = this.$common.apidomain + '/api/getimgcategory';
				this.$http.get(url).then(function (res) {
					if (res.body.status != 0) {
						Toast(res.body.message);
						return;
					}
					//console.log(res.body);
					this.list = res.body.message;
					//动态设置ul的宽度 (li的宽度 * 图片分类的个数)
					var li = 68;//li的宽
					var count = res.body.message.length + 1; //加1是因为多了一个li
					this.ulWidth = 68 * count;
				})
			}
		},
		created() {
			this.getCategory();
			this.getImgs(0);//0表示显示全部 默认显示全部
		}
	}
</script>

<style scoped>
	/* 分类样式 */
	#category {
		width: 100%;
		max-width: 100%;	
		overflow-x: auto;
	}
	#category ul {
		width: 1000px;
		list-style: none;
		margin: 0;
		padding-left: 10px;
	}
	#category ul li {
		display: inline-block;
		padding: 6px;
		color: #0094ff;
		font-size: 14px;
		cursor: pointer;
	}
	
	/* 图文列表样式 */
	#imgList ul {
		list-style: none;
		padding: 0;
	}
	#imgList ul li {
		position: relative;
	}
	#imgList ul li img {
		width: 100%;
		height: 300px;
	}
	#imgList .desc {
		background: rgba(0, 0, 0, .3);
		position: absolute;
		bottom: 2px;
		left: 0px;
	}
	#imgList .desc h5 {
		color: #fff;
		font-weight: 700;
	}
	#imgList .desc p {
		color: #fff;
	}
	image[lazy=loading] {
	  width: 40px;
	  height: 300px;
	  margin: auto;
	}
	
	/* 去掉图片分类的横向滚动条 */
	::-webkit-scrollbar {
    width: 1px;
	}
	::-webkit-scrollbar-track {
	    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
	    border-radius: 10px;
	}
	::-webkit-scrollbar-thumb {
	    border-radius: 10px;
	    background: rgba(0,0,0,0);
	    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
	}
	::-webkit-scrollbar-thumb:window-inactive {
	    background: rgba(255,0,0,0);
	}

</style>